<template>
	<view class="myinfo_edit">
		<uni-list>
			<uni-list-item title="头像" showArrow badge-positon="left" badge-text="dot">
				<template slot="footer">
					<image class="slot-image" :src="imgUrl" mode="heightFix"
						style="width: 100rpx; max-width: 100rpx; max-height: 100rpx; height: 100rpx;border-radius: 50% 50%;"
						@click="changeAvatar"></image>
				</template>
			</uni-list-item>
			<uni-list-item title="用户名" showArrow>
				<template slot="footer">
					<input placeholder="请输入用户名" style="width: 250rpx;" :value="userData.nickName"
						@blur="(e) => changeInfo(e.target.value, 'nickName')" />
				</template>
			</uni-list-item>
			<uni-list-item title="真实姓名" showArrow>
				<template slot="footer">
					<input placeholder="请输入真实姓名" style="width: 250rpx;" :value="userData.realName"
						@blur="(e) => changeInfo(e.target.value, 'realName')" />
				</template>
			</uni-list-item>
			<uni-list-item title="出生年月" showArrow>
				<template slot="footer">
					<picker mode="date" style="width: 250rpx;" @change="changePicker" :value="userData.birthdayStr">
						<view style="color: #808080;">{{date}}</view>
					</picker>
				</template>
			</uni-list-item>
			<uni-list-item title="城市" showArrow>
				<template slot="footer">
					<picker mode="region" style="width: 250rpx;" @change="changeRegion">
						<view style="color: #808080;">{{region}}</view>
					</picker>
				</template>
			</uni-list-item>
			<uni-list-item title="学校" showArrow>
				<template slot="footer">
					<picker mode="selector" style="width: 250rpx;" @change="changeSchool" :range="schoolList" range-key="name">
						<view style="color: #808080;">{{school.name}}</view>
					</picker>
				</template>
			</uni-list-item>
		</uni-list>

		<view class="myinfo_info" v-show="isHideNotes">
			<image src="../../static/barIcon/icon_info.png" mode=""></image>
			<view class="">
				补全信息可获得免费答题券
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: "请选择出生年月",
				region: "请选择城市",
				school: {name: "请选择学校"},
				userData: {}, // 用户信息包含头像
				isHideNotes: true, // 隐藏底部notes
				imgUrl: null, // 头像地址
				schoolList: [],
			}
		},
		methods: {
			// 修改时间
			changePicker: function(item) {
				this.date = item.detail.value
				this.changeInfo(item.detail.value, "birthdayStr")
			},
			// 修改城市
			changeRegion: function(item) {
				this.region = item.detail.value[1]
				this.changeInfo(item.detail.value[1], "city")
			},
			changeSchool: function(item) {
				const schoolIndex = Number(item.detail.value)
				this.school = this.schoolList[schoolIndex]
				this.changeInfo(this.school.name, "schoolName")
			},
			// 上传图片并且修改头像
			changeAvatar: function() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择，和摄像头功能，默认二者都有
					success: res => {
						/*res.tempFilePaths[0]是获取到的第一个数据的blob地址，将他赋值给数据区的imgUrl*/
						uni.uploadFile({
							url: 'http://47.108.74.3:8091/img/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'image',
							success: (uploadFileRes) => {
								const imageData = JSON.parse(uploadFileRes?.data)
								if (imageData.code === '200') {
									this.imgUrl = imageData.data
									this.changeInfo(imageData.data, 'avatarUrl')
								}else {
									uni.showToast({
										icon:'error',
										title:"上传失败"
									})
								}
							}
						});
					}
				});
			},
			// 修改
			changeInfo: function(value, dataIndex) {
				if (!value) return
				const token = uni.getStorageSync("userInfo").token;
				const id = uni.getStorageSync("userInfo").id;
				this.$api.updateMyInfo({
					[dataIndex]: value,
					token,
					id
				}).then(
					(res) => {
						if (res?.code !== '200') {
							uni.showToast({
								icon: "error",
								title: "修改失败"
							})
						}
					}
				)
			},
			// 获取学校列表
			getSchoolList: function() {
				this.$api.querySchool().then(
					(res) => {
						if (res?.code === '200') {
							this.schoolList = res?.data
						}
					}
				)
			}
		},
		mounted() {
			const data = uni.getStorageSync("userData")
			this.userData = data
			this.getSchoolList();
			this.region = data.city
			this.imgUrl = data.avatarUrl
			this.date = data.birthdayStr
			if (data?.city && data.birthdayStr && data.nickName && data.realName && data.schoolName && data.avatarUrl) {
				this.isHideNotes = false
			}
		}
	}
</script>

<style>
	.myinfo_edit {
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx 40rpx;
	}

	.myinfo_info {
		margin-top: 30rpx;
		height: 80rpx;
		width: 100%;
		padding-left: 40rpx;
		display: flex;
		color: #F15F35;
	}

	.myinfo_info>image {
		height: 40rpx;
		width: 40rpx;
	}

	.myinfo_info>view {
		margin-left: 20rpx;
	}
</style>
